<!--
 * @FileDescription
 * @Author lz
 * @Date 20230222 10:32:49
 * @LastEditors lz
 * @LastEditTime 20230222 10:32:49
-->
<template>
    <div class="PopupPdf" v-show="HomeContent.Default.PDFOrderShow.value">
        <div class="content">
            <div class="header">
                <img src="/colImages/标定说明文字.png" class="pic">
                <img src="/colImages/ch_close.png" class="ch_close" @click="closeBtn">
            </div>
            <PDFViewer class="pdf-viewer" :Name="'PDFViewer'" :Url="HomeContent.Default.DocumentUrl.value"
                :OnLoad="OnViewerLoad" />
        </div>
    </div>
</template>

<script setup lang="ts">
import PDFViewer from '../../../PDFViewer/PDFViewer.vue';
import HomeContent from '../HomeContent';
import PDFViewerComponent from '../../../../runtime/module/PDFViewer/PDFViewerComponent';
import { computed } from 'vue';

const offset = computed(() => HomeContent.Default.PDFOrderShow.value ? 'translateX(0)' : 'translateX(-100%)');
function closeBtn() {
    HomeContent.Default.PDFOrderShow.value = false
}
function OnViewerLoad(): void {
    PDFViewerComponent.Default.UpdateToolbar('PDFViewer',
        {
            PresentationMode: false,
            OpenFile: false,
            Print: false,
            Download: false,
            ViewBookmark: false,
        });
}
</script>

<style scoped>
.PopupPdf {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transform: v-bind(offset);
    backdrop-filter: blur(1rem);
}
.content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    /* width: 1187px;
    height: 920px; */
    transform: translate(-50%, -50%);
    background-image: url('/colImages/背景框.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 90px 10px 4px;
}
.ch_close {
    width: 77px;
    height: 77px;
    position: absolute;
    right: -8px;
    top: 8px;
}
.pdf-viewer {
    width: 1100px;
    height: 750px;
    border-radius: 10px;
}
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #66E0FF;
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #165A9A;
}
.pic {
    position: absolute;
    left: -27px;
    top: 3px;
}
</style>